<template>
    <div class="oa_manage_container">
        <ZwSearchForm row-num="3" :option="searchOption2" @search="search" @reset="reset" @expand="getTableH" />

        <div class="action-bar">
            <div class="left-box"></div>
            <div class="right-box">
                <el-button v-auth="'ADD_OFFICIAL'" type="primary" @click="onAddOfficeAccount">添加公众号</el-button>
            </div>
        </div>
        <ZwTable2
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :row-key="getRowKey"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"></ZwTable2>
    </div>
</template>

<script lang="tsx" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable2 from '@/components/zw/table/Table';

import ZWTableSearch from '@/components/common/ZWTableSearch.vue';
import ZWTable from '@/components/common/ZWTable.vue';
import { deepCopy } from '@/utils/helper';
import { ElMessage, ElImage, ElIcon, ElButton, ElTag } from 'element-plus';

import { getOfficeAccountList, setOfficeAccount, getOfficeAccountState } from '@/api/channelconfig/officeAccount';

const route = useRoute();
const router = useRouter();

const searchOption = [
    {
        label: '认证状态',
        key: 'verify_type_info',
        value: '',
        type: 'select',
        option: [
            { value: '', label: '全部' },
            { value: -1, label: '未认证' },
            { value: 0, label: '已认证' }
        ]
    },
    {
        label: '账号类型',
        key: 'service_type_info',
        value: '',
        type: 'select',
        option: [
            { value: '', label: '全部' },
            { value: 0, label: '订阅号' },
            { value: 2, label: '服务号' }
        ]
    },
    { label: '公众号', key: 'nick_name', value: '', type: 'input' }
    // { label: '公众号', key: 'nick_name', value: '', type: 'input' },
    // { label: '时间段', key: 'key1', value: [], type: 'datePicker' }
];
const searchOption2 = computed(() => {
    return [
        {
            label: '公众号名称',
            name: 'nick_name',
            value: '',
            type: 'input',
            width: '280px',
            placeholder: '请输入公众号名称'
        },
        {
            label: '认证状态',
            name: 'verify_type_info',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '全部', id: '' },
                        { name: '未认证', id: -1 },
                        { name: '已认证', id: '0' }
                    ]);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '账号类型',
            name: 'service_type_info',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '全部', id: '' },
                        { name: '服务号', id: 2 },
                        { name: '订阅号', id: '0' }
                    ]);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '是否同主体',
            name: 'is_principal',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '是', id: 2 },
                        { name: '否', id: 1 }
                    ]);
                });
            }
        },
        {
            label: '绑定状态',
            name: 'have_open',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '已绑定', id: 2 },
                        { name: '未绑定', id: 1 }
                    ]);
                });
            }
        }
    ];
});
const tableOption = [
    {
        prop: 'nick_name',
        label: '公众号',
        render({ row }) {
            const slotError = () => (
                <div class="image_slot">
                    <ElIcon>
                        <IconPicture />
                    </ElIcon>
                </div>
            );
            return (
                <div class="cusInfo">
                    <ElImage
                        previewTeleported
                        previewSrcList={[row.head_img]}
                        vSlots={{ error: slotError }}
                        src={row.head_img}
                        fit="cover"
                        class="avatar"></ElImage>
                    <span style="margin-left: 6px">
                        {row.nick_name}
                        {row.principal_name && `(${row.principal_name})`}
                    </span>
                </div>
            );
        }
    },
    {
        label: '账号类型',
        prop: 'service_type_info',
        render({ row }) {
            return (
                <div>
                    <ElTag vShow={row.service_type_info == 0 || row.service_type_info == 1} type="danger" size="small">
                        订阅号
                    </ElTag>
                    <ElTag vShow={row.service_type_info == 2} size="small">
                        服务号
                    </ElTag>
                </div>
            );
        }
    },
    {
        label: '认证状态',
        prop: 'verify_type_info',
        render({ row }) {
            return (
                <>
                    <span vShow={row.verify_type_info == -1} class="verify_type_info1">
                        未认证
                    </span>
                    <span vShow={row.verify_type_info == 0} class="verify_type_info2">
                        已认证
                    </span>
                </>
            );
        }
    },
    {
        label: '微信开放平台绑定状态',
        prop: 'have_open',
        render({ row }: any) {
            return <div>{row.have_open == 1 ? '未绑定' : row.have_open == 2 ? '已绑定' : ''}</div>;
        }
    },
    {
        label: '绑定开放平台是否同主体',
        prop: 'is_principal',
        render({ row }: any) {
            return <div>{row.is_principal == 1 ? '否' : row.is_principal == 2 ? '是' : ''}</div>;
        }
    }
];
const getRowKey = (row: any) => {
    return row.id;
};
const defaultParams = reactive({
    activity_id: route.query.id,
    name: ''
});
const state = reactive({
    searchParams: deepCopy({ ...defaultParams })
});
const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return getOfficeAccountList;
};
const search = (data: any) => {
    state.searchParams = { ...deepCopy(data) };
};
const reset = (v?: any) => {
    state.searchParams = deepCopy(v);
};
const searchKeys = ref();

const callBackFunc = () => {
    const { auth_code, state } = route.query;
    if (auth_code && state) {
        getOfficeAccountState({ auth_code, state }).then((res: any) => {
            router.replace(route.path);
            search(defaultParams);
        });
    }
};

// 同步数据
const onSynchronization = (e: any) => {};

// 添加公众号
const onAddOfficeAccount = () => {
    setOfficeAccount({ callback_front_url: location.href }).then((res1: any) => {
        window.open(res1.url);
    });
};

onMounted(() => {
    callBackFunc();
});
</script>

<style lang="scss" scoped>
.oa_manage_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep(.verify_type_info1) {
    font-size: 14px;
    color: #969696;
}

:deep(.verify_type_info2) {
    font-size: 14px;
    color: #ff6b00;
}

:deep(.oa-manage-table) {
    .key5 {
        display: flex;
        align-items: center;

        .el-icon {
            margin-left: 6px;
        }
    }
}

:deep(.avatar) {
    width: 36px;
    height: 36px;
    font-size: 36px;
}

:deep(.cusInfo) {
    display: flex;
    align-items: center;
}
</style>
